import React from 'react';
import _ from 'lodash';
import JsBarcode from 'jsbarcode';

interface PrintElemProps {
  dataList: any;
  common: any;
}

class PrintElemInfo extends React.Component<PrintElemProps> {
  componentDidUpdate(props: any) {
    const { dataList = [] } = this.props;
    const params = {
      width: 1.1,
      height: 30,
      fontSize: 14,
      marginTop: -4,
      float: 'left',
    };
    if (_.isEqual(dataList, props.dataList)) {
      const Payment: any = [];
      const noPayment: any = [];
      dataList.map((item: any) => {
        if (item.payment > 0) {
          Payment.push(item);
        } else noPayment.push(item);
        return null;
      });
      Payment.map((item: any, index: number) => (
        JsBarcode(
          `#jsbarcode${index}`,
          item.expCode,
          params,
        )
      ));
      noPayment.map((item: any, index: number) => (
        JsBarcode(
          `#jsbarcode${index}`,
          item.expCode,
          params,
        )
      ));
    }
  }

  render() {
    const { dataList = [], common = {} } = this.props;

    const Payment: any = [];
    const noPayment: any = [];
    dataList.map((item: any) => {
      if (item.payment > 0) {
        Payment.push(item);
      } else noPayment.push(item);
      return null;
    });

    return (
      <div style={{ display: 'none' }}>
        <div className="printView" id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
              fontSize: 12,
            }}
          >
            <thead />
            <tbody>
              <tr>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>批次</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递状态</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递数量</td>
              </tr>
              <tr style={{ lineHeight: '32px', height: '32px' }}>
                <td style={{ border: '1px solid #ADADAD' }}>{common.expressName}</td>
                <td style={{ border: '1px solid #ADADAD' }}>
                  {`${common.batchDate}第${common.seqNo}批次`}
                </td>
                <td style={{ border: '1px solid #ADADAD' }}>全部</td>
                <td style={{ border: '1px solid #ADADAD' }}>{dataList.length}</td>
              </tr>
            </tbody>
          </table>
          <div style={{ marginTop: 30 }}>
            <h3 style={{ textAlign: 'center' }}>普通快递条形码({noPayment.length})</h3>
            {noPayment.map((item: any, index: number) => (
              <svg id={`jsbarcode${index}`} key={item.id} />
            ))}
          </div>
          <div style={{ marginTop: 30 }}>
            <h3 style={{ textAlign: 'center' }}>到付快递条形码({Payment.length})</h3>
            {Payment.map((item: any, index: number) => (
              <svg id={`jsbarcode${index}`} key={item.id} />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default PrintElemInfo;
